<template>
<div style="padding-top: 8rem">
  <van-image
    round
    width="10rem"
    height="10rem"
    src="https://img01.yzcdn.cn/vant/cat.jpeg"
  />
  <van-form v-if="operate=='login'" :model="loginForm" style="width: 80%;margin: auto"  @submit="login()">
    <van-field
      v-model="loginForm.username"
      name="用户ID"
      label="用户ID"
      type="text"
      placeholder="用户ID"
      :rules="[{ required: true, message: '请填写用户ID' }]"
    />
    <van-field
      v-model="loginForm.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-checkbox v-model="autoLogin" icon-size="0.8rem" style="margin-bottom: 1rem;margin-top: 1rem;margin-left: 1rem;font-size: 0.8rem">下次自动登陆</van-checkbox>
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">登陆</van-button>
      <el-button
        type="text"
        style="width: 40%;  border: none;display: inline-block;"
        @click="operate='register',loginForm={}"
      >没有账号？去注册</el-button>
    </div>
  </van-form>
  <van-form v-if="operate=='register'" :model="registerUser" @submit="register()">
    <van-field
      v-model="registerUser.userId"
      name="ID"
      label="用户ID"
      type="text"
      placeholder="用户ID"
      :rules="[{ required: true, message: '请填写用户ID' }]"
    />
    <van-field
      v-model="registerUser.userName"
      name="用户名"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="registerUser.password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />

    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">注册</van-button>
      <el-button
        type="text"
        style="width: 40%;  border: none;display: inline-block;"
        @click="operate='login',registerUser={}"
      >已有账号？去登陆</el-button>
    </div>
  </van-form>
</div>
</template>

<script>
  import { userLogin } from "@/api/user";
  import http from "../utils/http";
  import {mapMutations} from "vuex";
    export default {
        name: "Login",
      data() {
        return {
          autoLogin:false,
          loginForm: {
            username: '',
            password: '',
          },
          operate:'login',
          registerUser:{
            userId:"",
            userName:"",
            password: "",
          },
        };
      },
      methods: {
        login () {
          var _this = this;
          userLogin({
            loginName: this.loginForm.username,
            password: this.$md5(this.loginForm.password),
          }).then((resp) => {
            let code=resp.data.code;
            if(code===200){
              if(this.autoLogin==true) {
                window.localStorage.setItem("loginId", this.loginForm.username);  // 24天后过期
                window.localStorage.setItem("password", this.loginForm.password);  // 24天后过期
              }

              let token=resp.data.data;
              //存储token
              console.log(resp.data.data)
              _this.$store.commit('SET_TOKENN', token);
              //存储user，优雅一点的做法是token和user分开获取
              _this.$store.commit('SET_USER', token);
              _this.$router.replace({path: "/chatHome"});
            }
            if(code==404){
              this.$message.error(resp.data.message)
            }
            if(code==400){
              this.$message.error(resp.data.message)
            }
          });
        },
        register(){
          this.registerUser.password=this.$md5(this.registerUser.password);
          http.get("user/register",this.registerUser).then((resp)=>{
            if(resp.data.code==200){
              this.$message.success(resp.data.message);
              this.operate='login'
              this.registerUser={}
            }else if(resp.data.code==404){
              this.$message.warning(resp.data.message);
            }else{
              this.$message.error(resp.data.message);
            }
          })
        },
        autoLoginMethod(userId,password) {
          this.loginForm.username=userId;
          this.loginForm.password=password;
          this.login();
        }
      },
      created() {
        let userId=window.localStorage.getItem("loginId");  // 24天后过期
        let  password=window.localStorage.getItem("password");  // 24天后过期
        console.log(userId,password)
        if(userId!=undefined && password!=undefined && userId!=null && password!=null) {
          this.autoLoginMethod(window.localStorage.getItem("loginId"),window.localStorage.getItem("password"))
        }
      }
    }
</script>

<style scoped>

</style>
